import React, { useContext } from 'react';
import { Container } from './components/container';
import styles from './Dragger.module.less'
import { AppContext } from '../../../core';
import axios from 'axios';
import * as api from '../../api';
import { useStateFromRedux } from './reducer';

export default function Dragger ({ width, height }: {width: number, height: React.CSSProperties["height"]}) {
  const { slots } = useContext(AppContext);
  const [, setCards] = useStateFromRedux('cards');

  const componentLibs = new Map();
  const sideBar = slots.sideBar.find(item => item.slot === 'sideBar');

  Array.isArray(sideBar?.component) && sideBar?.component.map((module) => {
    componentLibs.set(module.props!.name, module.component)
  })

  React.useEffect(() => {
    api.query().then((res) => {
      console.log('res', res);
      setCards(JSON.parse(res.data.data || '[]'));
    })
  }, []);

    return <div id='dragger' className={styles.dragger}>
      <div className={styles.draggerWrapper} style={{width: width, minHeight: height}}>
        <Container style={{width: width, minHeight: height}} componentLibs={componentLibs}/>
      </div>
    </div>;
}